<template>
  <div class="dashboard-container">
    <!-- 顶部导航栏 -->
    <header class="top-nav-bar">
      <div class="nav-left">
        <div class="logo">
          <div class="logo-icon">智</div>
          <span class="logo-text">智学</span>
        </div>
        <nav class="main-nav">
          <RouterLink to="/" class="nav-item active">
            学习中心
          </RouterLink>
          <RouterLink to="/plan" class="nav-item">
            学习计划
          </RouterLink>
        </nav>
        <div class="subject-shortcuts">
          <div class="subject-shortcut" v-for="subject in subjects" :key="subject.id">
            <el-icon :style="{ color: subject.color }">
              <component :is="subject.icon" />
            </el-icon>
            <span>{{ subject.name }}</span>
          </div>
        </div>
      </div>
      <div class="nav-right">
        <el-button type="primary" size="small" class="add-plan-btn">
          新增计划
        </el-button>
        <el-icon class="search-icon"><Search /></el-icon>
      </div>
    </header>

    <!-- 日期状态行 -->
    <div class="date-status-bar">
      <span class="date-text">今天是 {{ currentDate }} {{ currentTime }}</span>
    </div>

    <!-- 主要内容区域 -->
    <main class="main-content">
      <!-- 两栏布局 -->
      <div class="two-column-layout">
        <!-- 左侧列 -->
        <div class="left-column">
          <!-- 学习概览卡片 -->
          <el-card class="overview-card">
            <div class="inner-card-header">
              <span class="card-title">学习概览</span>
            </div>
            
            <div class="metrics-row">
              <div class="metric-item">
                <div class="metric-icon" style="background-color: #E3F2FD; color: #1976D2;">
                  <el-icon><Calendar /></el-icon>
                </div>
                <div class="metric-value">15</div>
                <div class="metric-label">连续学习天数</div>
              </div>
              <div class="metric-item">
                <div class="metric-icon" style="background-color: #E8F5E8; color: #388E3C;">
                  <el-icon><Trophy /></el-icon>
                </div>
                <div class="metric-value">8</div>
                <div class="metric-label">获徽章数</div>
              </div>
              <div class="metric-item">
                <div class="metric-icon" style="background-color: #FFF3E0; color: #F57C00;">
                  <el-icon><Clock /></el-icon>
                </div>
                <div class="metric-value">127</div>
                <div class="metric-label">总学习时长</div>
              </div>
            </div>

            <div class="progress-section">
              <div class="progress-header">
                <span class="progress-label">本周学习目标</span>
                <span class="progress-percentage">76%</span>
              </div>
              <el-progress :percentage="76" color="#1976D2" :show-text="false" />
              <div class="progress-footer">
                <span class="progress-info">已完成作业 24</span>
                <span class="progress-info">87%</span>
              </div>
            </div>
          </el-card>

          <!-- 学科概览 -->
          <el-card class="subject-overview-card">
            <div class="inner-card-header">
              <span class="card-title">学科概览</span>
            </div>
            
            <div class="subject-cards">
              <div class="subject-card" v-for="ds in detailedSubjects" :key="ds.id">
                <div class="subject-card-header">
                  <div class="subject-info">
                    <el-icon :style="{ color: ds.color }">
                      <component :is="ds.icon" />
                    </el-icon>
                    <div class="subject-names">
                      <div class="subject-name">{{ ds.name }}</div>
                      <div class="subject-en-name">{{ ds.enName }}</div>
                    </div>
                  </div>
                  <div class="subject-score">{{ ds.progress }}%</div>
                </div>
                
                <div class="subject-progress">
                  <span class="progress-label">学习进度</span>
                  <el-progress :percentage="ds.progress" color="#1976D2" :show-text="false" />
                  <span class="progress-text">{{ ds.completed }}/{{ ds.total }} 题</span>
                </div>
                
                <div class="subject-stats">
                  <div class="stat-item">
                    <span class="stat-label">本周学习时间</span>
                    <span class="stat-value">{{ ds.weeklyHours }}小时</span>
                  </div>
                  <div class="stat-item">
                    <span class="stat-label">特色内容</span>
                    <span class="stat-value">{{ ds.practiceCount }}项</span>
                  </div>
                </div>
                
                <div class="subject-actions">
                  <el-button type="primary" size="small">继续学习</el-button>
  <el-button size="small" @click="handleQuiz">练习题</el-button>
                </div>
              </div>
            </div>
          </el-card>
        </div>

        <!-- 右侧列 -->
        <div class="right-column">
          <!-- 快捷操作 -->
          <el-card class="quick-actions-card">
            <div class="inner-card-header">
              <span class="card-title">快捷操作</span>
            </div>
            
            <div class="quick-actions-grid">
              <div class="action-item" @click="handleContinueLearning">
                <div class="action-icon" style="background-color: #1976D2;">
                  <el-icon><VideoPlay /></el-icon>
                </div>
                <span class="action-label">继续上次学习</span>
              </div>
              <div class="action-item" @click="handleDailyPractice">
                <div class="action-icon" style="background-color: #388E3C;">
                  <el-icon><Edit /></el-icon>
                </div>
                <span class="action-label">今日练习</span>
                <div class="action-badge">5题</div>
              </div>
              <div class="action-item" @click="handleStudyPlan">
                <div class="action-icon" style="background-color: #F57C00;">
                  <el-icon><Calendar /></el-icon>
                </div>
                <span class="action-label">学习计划</span>
              </div>
              <div class="action-item" @click="handleMyNotes">
                <div class="action-icon" style="background-color: #757575;">
                  <el-icon><Document /></el-icon>
                </div>
                <span class="action-label">我的笔记</span>
              </div>
            </div>
          </el-card>

          <!-- 今日安排 -->
          <el-card class="today-schedule-card">
            <div class="inner-card-header">
              <span class="card-title">今日安排</span>
              <el-link type="primary" :underline="false">查看全部</el-link>
            </div>
            
            <div class="schedule-list">
              <div class="schedule-item" v-for="(item, index) in todaySchedule" :key="item.id">
                <div class="schedule-number">{{ index + 1 }}</div>
                <div class="schedule-content">
                  <div class="schedule-title">{{ item.title }}</div>
                  <div class="schedule-subtitle">{{ item.subtitle }}</div>
                </div>
                <div class="schedule-time">{{ item.time }}</div>
              </div>
            </div>
          </el-card>
        </div>
      </div>

      <!-- 知识点学习区域 -->
      <div class="knowledge-section" v-if="showKnowledgeSection">
        <el-card class="knowledge-card">
          <div class="inner-card-header">
            <span class="card-title">知识点学习</span>
          </div>
          <!-- 新增：四个Tab + 具体内容 -->
          <el-tabs v-model="activeKnowledgeTab" class="knowledge-tabs">
            <el-tab-pane label="理论内容" name="theory">
              <div class="theory-content">
                <h4 class="sub-title">二次函数基础</h4>
                <p>二次函数形如 y = a x² + b x + c。a 控制开口，b 控制左右位置和斜率，c 控制上下平移。</p>
                <ul class="bullet-list">
                  <li>a &gt; 0 开口向上，a &lt; 0 开口向下；|a| 越大曲线越“瘦”。</li>
                  <li>顶点坐标：x = -b / (2a)，y = (4ac - b²) / (4a)。</li>
                  <li>对称轴：x = -b / (2a)。</li>
                </ul>
              </div>
            </el-tab-pane>
            <el-tab-pane label="可视化演示" name="visualization">
              <div class="visualization-content">
                <canvas ref="chartCanvas" class="chart-canvas" width="600" height="320"></canvas>
                <div class="quick-control">
                  <span class="slider-label">系数 a</span>
                  <el-slider v-model="coefficientA" :min="-3" :max="3" :step="0.1" />
                </div>
                <div class="note">提示：拖动上方滑块观察 y = a x² 曲线变化。</div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="交互式模拟" name="simulator">
              <div class="simulator-content">
                <div class="sliders">
                  <div class="slider-row">
                    <span class="slider-label">a</span>
                    <el-slider v-model="simulatorParams.a" :min="-3" :max="3" :step="0.1" />
                  </div>
                  <div class="slider-row">
                    <span class="slider-label">b</span>
                    <el-slider v-model="simulatorParams.b" :min="-10" :max="10" :step="0.1" />
                  </div>
                  <div class="slider-row">
                    <span class="slider-label">c</span>
                    <el-slider v-model="simulatorParams.c" :min="-10" :max="10" :step="0.1" />
                  </div>
                </div>
                <div class="simulator-stats">
                  <!-- 小白注释：当 a=0 顶点不存在，用“-”占位防止报错 -->
                  <span>顶点：({{ vertexX !== null ? vertexX.toFixed(2) : '-' }}, {{ vertexY !== null ? vertexY.toFixed(2) : '-' }})</span>
                  <span>开口：{{ simulatorParams.a > 0 ? '向上' : simulatorParams.a < 0 ? '向下' : '平的' }}</span>
                </div>
                <canvas ref="chartCanvasSim" class="chart-canvas" width="600" height="320"></canvas>
              </div>
            </el-tab-pane>
            <el-tab-pane label="公式推导" name="derivation">
              <div class="derivation-content">
                <p>从一般式 y = a x<sup>2</sup> + b x + c 出发，使用“配方法”把它改成顶点式。</p>
                <p>步骤：</p>
                <ol class="derivation-steps">
                  <li>提出 a：y = a [ x<sup>2</sup> + (b/a) x ] + c</li>
                  <li>配平方：x<sup>2</sup> + (b/a)x = ( x + b/(2a) )<sup>2</sup> - (b/(2a))<sup>2</sup></li>
                  <li>代回：y = a ( x + b/(2a) )<sup>2</sup> + c - a ( b/(2a) )<sup>2</sup></li>
                  <li>化简：y = a ( x - ( -b/(2a) ) )<sup>2</sup> + (4ac - b<sup>2</sup>)/(4a)</li>
                </ol>
                <p>因此顶点坐标为 ( -b/(2a) , (4ac - b²)/(4a) )，对称轴为 x = -b/(2a)。</p>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch, nextTick } from 'vue'
import { useRouter } from 'vue-router'
/**
 * 小白注释：只保留实际使用到的图标
 * 为什么报红：ESLint 提示“已声明但未读取”，说明有导入却没用到；
 * 怎么做：删掉未用到的 ElMessage、Collection、Refresh、Aim、QuestionFilled 等，保持代码干净。
 */
import { Calendar, Search, Trophy, Clock, VideoPlay, Edit, Document, Reading, DataAnalysis, Star } from '@element-plus/icons-vue'

/**
 * 小白注释：组件命名必须是“多词”形式（ESLint 规则：vue/multi-word-component-names）
 * 为什么：避免和浏览器内置标签（比如 <menu>、<dialog>）冲突。
 * 解决：给组件显式取名为 DashboardView（两个词），这样就不再报红。
 * 注意：这是 <script setup> 的编译宏，不用 import，直接写即可。
 */
defineOptions({ name: 'DashboardView' })

// 路由实例：用于在按钮点击后进行页面跳转（小白也能理解：点按钮=去到对应页面）
const router = useRouter()

// 当前日期时间
const currentDate = ref('')
const currentTime = ref('')

// 学科数据（小白注释：把图标从字符串改成真正的组件，避免找不到组件导致标红）
const subjects = ref([
  { id: 1, name: '语文', icon: Reading, color: '#E74C3C' },
  { id: 2, name: '数学', icon: DataAnalysis, color: '#3498DB' },
  { id: 3, name: '英语', icon: Star, color: '#2ECC71' },
  { id: 4, name: '物理', icon: DataAnalysis, color: '#9B59B6' },
  { id: 5, name: '化学', icon: DataAnalysis, color: '#F39C12' },
  { id: 6, name: '生物', icon: DataAnalysis, color: '#27AE60' }
])

// 详细学科数据（小白注释：同样改为真实组件对象，模板里 <component :is="ds.icon" /> 才能识别）
const detailedSubjects = ref([
  {
    id: 1,
    name: '语文',
    enName: 'Chinese',
    icon: Reading,
    color: '#E74C3C',
    progress: 85,
    completed: 17,
    total: 20,
    weeklyHours: 8.5,
    practiceCount: 245
  },
  {
    id: 2,
    name: '数学',
    enName: 'Mathematics',
    icon: DataAnalysis,
    color: '#3498DB',
    progress: 92,
    completed: 23,
    total: 25,
    weeklyHours: 11,
    practiceCount: 298,
    tag: '进阶',
    tagType: 'warning'
  }
])

// 今日安排
const todaySchedule = ref([
  { id: 1, title: '高等数学 - 导数应用', time: '09:00', subtitle: '数学', tag: '', tagType: '' },
  { id: 2, title: '英语阅读理解练习', time: '14:30', subtitle: '阅读 Unit 4 练习', tag: '进阶', tagType: 'warning' },
  { id: 3, title: '物理实验报告', time: '16:00', subtitle: '实验数据分析', tag: '', tagType: '' }
])

// 知识点学习相关
const showKnowledgeSection = ref(true)
const activeKnowledgeTab = ref('theory')
const coefficientA = ref(1)
const chartCanvas = ref<HTMLCanvasElement>()
const chartCanvasSim = ref<HTMLCanvasElement>()

// 小白注释：模板里已经写好了四个 Tab（理论内容/可视化演示/交互式模拟/公式推导）
// 目前不通过数组动态生成，因此去掉未使用的 knowledgeTabs，避免“已赋值但未读取”的提示。

const simulatorParams = ref({ a: 1, b: 0, c: 0 })

// 计算属性：顶点坐标（小白注释：根据公式实时算出顶点）
const vertexX = computed(() => {
  const a = simulatorParams.value.a
  if (Math.abs(a) < 1e-6) return null // 小白注释：a=0时不是抛物线，顶点不存在
  return -simulatorParams.value.b / (2 * a)
})
const vertexY = computed(() => {
  const { a, b, c } = simulatorParams.value
  if (Math.abs(a) < 1e-6) return null // 小白注释：a=0顶点y也没有意义
  return (4 * a * c - b * b) / (4 * a)
})

/**
 * 小白注释：更新日期时间
 * 做了什么：把“今天是 年-月-日 星期几”和当前时间更新到界面。
 * 为什么每秒更新：像时钟一样走动，用户看到的是最新时间。
 */
const updateDateTime = () => {
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
  const weekday = weekdays[now.getDay()]
  currentDate.value = `${year}年${month}月${day}日 ${weekday}`
  currentTime.value = now.toLocaleTimeString('zh-CN', { hour12: false })
}

/**
 * 小白注释：处理快捷操作
 * 说明：每个函数都负责跳到对应的页面，相当于“快捷入口”。
 * 使用：点击右侧“快捷操作”卡片上的按钮时触发。
 */
/**
 * 小白注释：练习题入口
 * 做了什么：当你点击“练习题”按钮时，跳转到 `/quiz` 页面。
 * 为什么要加：让 handleQuiz 真正被使用，避免“已声明但未读取”的报红。
 */
const handleQuiz = () => router.push('/quiz')
const handleContinueLearning = () => router.push('/continue')
const handleDailyPractice = () => router.push('/practice')
const handleStudyPlan = () => router.push('/plan')
const handleMyNotes = () => router.push('/notes')

/**
 * 小白注释：统一绘图入口
 * 做了什么：根据当前参数分别刷新“可视化演示”和“交互式模拟”的两块画布。
 * 你可以把它理解成总控制台，确保两个图保持同步。
 */
const drawChart = () => {
  if (chartCanvas.value) {
    drawChartOn(chartCanvas.value, { a: coefficientA.value, b: 0, c: 0 })
  }
  if (chartCanvasSim.value) {
    const { a, b, c } = simulatorParams.value
    drawChartOn(chartCanvasSim.value, { a, b, c })
  }
}

/**
 * 小白注释：绘制单个画布上的函数图像
 * 参数解释：a、b、c 是二次函数 y = a x² + b x + c 的三个系数。
 * 做了什么：
 * 1. 先画坐标轴方便观察；
 * 2. 再把函数曲线按像素点连起来展示；
 * 3. scale 决定“数学单位到像素”的缩放比例。
 */
const drawChartOn = (canvas: HTMLCanvasElement, params: { a: number; b: number; c: number }) => {
  const ctx = canvas.getContext('2d')
  if (!ctx) return
  const width = canvas.width
  const height = canvas.height
  const centerX = width / 2
  const centerY = height / 2
  const scale = 40 // 每1个数学单位=40像素（小白注释：决定大小）
  ctx.clearRect(0, 0, width, height)
  // 画坐标轴（小白注释：先画横轴和纵轴方便观察）
  ctx.strokeStyle = '#E5E7EB'
  ctx.lineWidth = 1
  ctx.beginPath(); ctx.moveTo(0, centerY); ctx.lineTo(width, centerY); ctx.stroke()
  ctx.beginPath(); ctx.moveTo(centerX, 0); ctx.lineTo(centerX, height); ctx.stroke()
  // 画函数曲线（小白注释：把每个点连起来）
  const { a, b, c } = params
  ctx.strokeStyle = '#2E6BFF'
  ctx.lineWidth = 2
  ctx.beginPath()
  for (let px = 0; px <= width; px += 1) {
    const x = (px - centerX) / scale
    const y = a * x * x + b * x + c
    const py = centerY - y * scale
    if (px === 0) ctx.moveTo(px, py)
    else ctx.lineTo(px, py)
  }
  ctx.stroke()
}


/**
 * 小白注释：监听参数变化
 * 说明：只要 a、b、c 或当前Tab变动，就重新绘图，保证图像实时更新。
 */
watch(coefficientA, () => drawChart())
watch(simulatorParams, () => drawChart(), { deep: true })
watch(activeKnowledgeTab, async () => { await nextTick(); drawChart() })

/**
 * 小白注释：组件挂载
 * 做了什么：
 * 1. 启动每秒更新一次时间的定时器；
 * 2. 调用 drawChart 绘制初始图像。
 */
onMounted(() => { updateDateTime(); setInterval(updateDateTime, 1000); drawChart() })
</script>

<style scoped>
/* 顶部导航栏样式 */
.top-nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: white;
  border-bottom: 1px solid #E0E0E0;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 32px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo-icon {
  width: 32px;
  height: 32px;
  background: #1976D2;
  color: white;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.logo-text {
  font-size: 20px;
  font-weight: 600;
  color: #1976D2;
}

.main-nav {
  display: flex;
  gap: 24px;
}

.nav-item {
  padding: 8px 16px;
  border-radius: 20px;
  text-decoration: none;
  color: #666;
  font-size: 14px;
  transition: all 0.3s ease;
}

.nav-item.active {
  background: #1976D2;
  color: white;
}

.subject-shortcuts {
  display: flex;
  gap: 16px;
}

.subject-shortcut {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #666;
  cursor: pointer;
  transition: color 0.3s ease;
}

.subject-shortcut:hover {
  color: #1976D2;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.add-plan-btn {
  background: #1976D2;
  border: none;
}

.search-icon {
  font-size: 20px;
  color: #666;
  cursor: pointer;
}

/* 日期状态行 */
.date-status-bar {
  padding: 12px 24px;
  background: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
}

.date-text {
  font-size: 14px;
  color: #666;
}

/* 主要内容区域 */
.main-content {
  padding: 24px;
  background: #FAFAFA;
  min-height: calc(100vh - 120px);
}

.two-column-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  max-width: 1400px;
  margin: 0 auto;
}

/* 卡片通用样式 */
:deep(.el-card) {
  border-radius: 12px;
  border: 1px solid #E0E0E0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.inner-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #F0F0F0;
  margin-bottom: 8px;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

/* 学习概览卡片 */
.metrics-row {
  display: flex;
  justify-content: space-around;
  margin-bottom: 24px;
}

.metric-item {
  text-align: center;
  flex: 1;
}

.metric-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
  font-size: 24px;
}

.metric-value {
  font-size: 32px;
  font-weight: 700;
  color: #333;
  margin-bottom: 4px;
}

.metric-label {
  font-size: 12px;
  color: #666;
}

.progress-section {
  margin-top: 24px;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.progress-label {
  font-size: 14px;
  color: #333;
}

.progress-percentage {
  font-size: 14px;
  font-weight: 600;
  color: #1976D2;
}

.progress-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 12px;
  color: #666;
}

/* 学科概览卡片 */
.subject-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.subject-card {
  background: white;
  border-radius: 12px;
  padding: 16px;
  border: 1px solid #E0E0E0;
}

.subject-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.subject-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.subject-names {
  display: flex;
  flex-direction: column;
}

.subject-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.subject-en-name {
  font-size: 12px;
  color: #999;
}

.subject-score {
  font-size: 24px;
  font-weight: 700;
  color: #1976D2;
}

.subject-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.subject-progress .progress-label {
  font-size: 12px;
  color: #666;
  min-width: 60px;
}

.subject-progress .progress-text {
  font-size: 12px;
  color: #666;
  min-width: 60px;
}

.subject-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-label {
  font-size: 12px;
  color: #999;
}

.stat-value {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.subject-actions {
  display: flex;
  gap: 8px;
}

/* 快捷操作卡片 */
.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: white;
  border-radius: 12px;
  border: 1px solid #E0E0E0;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.action-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.action-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
}

.action-label {
  font-size: 12px;
  color: #333;
  text-align: center;
}

.action-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #1976D2;
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
}

/* 今日安排卡片 */
.schedule-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.schedule-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: white;
  border-radius: 10px;
  border: 1px solid #E0E0E0;
}

.schedule-number {
  width: 24px;
  height: 24px;
  background: #1976D2;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}

.schedule-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.schedule-title {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.schedule-subtitle {
  font-size: 12px;
  color: #999;
}

.schedule-time {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}
</style>